<template>
  <div style="width: 100%; height: 100%;">
    <div style="width: 100%; height: 600px;">
      <kunkka-panel-line
        ref="kunkkaPanelLine"
        :panel="panels"
        :link="links"
        style="border: 1px solid" />
    </div>
    <el-row style="margin-top: 10px; text-align: right;">
      <el-button type="success" size="mini" @click="reset">重置</el-button>
      <el-button type="success" size="mini" @click="getNexus">获取连接数据</el-button>
    </el-row>
    <div class="markdown-body">
      <readme />
    </div>
  </div>
</template>

<script>
import Readme from './readme.md';
export default {
  components: { Readme },
  data() {
    return {
      links: [
        { from: 'a1', to: 'c3-1-1'},
        { from: 'b1', to: 'a2-1-1'},
        { from: 'c2', to: 'b1-1-1'}
      ],
      panels: [
        {
          paneid: 'pane1', // 面板id
          panelabel: '面板1的自我介绍', // 面板文字
          width: 200, // 面板宽度(px)
          left: 30, // 面板距离容器左侧距离(px)
          top: 30, // 面板距离容器顶部距离(px),
          children: [ // 面板下节点数据
            {
              id: 'a1',
              label: '节点1'
            },
            {
              id: 'a2',
              label: '节点2',
              children: [
                {
                  id: 'a2-1',
                  label: '节点2-1',
                  children: [
                    {
                      id: 'a2-1-1',
                      label: '节点2-1-1'
                    }
                  ]
                }
              ]
            },
            {
              id: 'a3',
              label: '节点3'
            }
          ]
        },
        {
          paneid: 'pane2', // 面板id
          panelabel: '我是面板2', // 面板文字
          width: 200, // 面板宽度(px)
          left: 630, // 面板距离容器左侧距离(px)
          top: 30, // 面板距离容器顶部距离(px),
          children: [ // 面板下节点数据
            {
              id: 'b1',
              label: '节点1',
              children: [
                {
                  id: 'b1-1',
                  label: '节点1-1',
                  children: [
                    {
                      id: 'b1-1-1',
                      label: '节点1-1-1'
                    }
                  ]
                }
              ]
            },
            {
              id: 'b2',
              label: '节点2'
            },
            {
              id: 'b3',
              label: '节点3'
            }
          ]
        },
        {
          paneid: 'pane3', // 面板id
          panelabel: '我是面包3', // 面板文字
          width: 200, // 面板宽度(px)
          left: 330, // 面板距离容器左侧距离(px)
          top: 330, // 面板距离容器顶部距离(px),
          children: [ // 面板下节点数据
            {
              id: 'c1',
              label: '节点1'
            },
            {
              id: 'c2',
              label: '节点2'
            },
            {
              id: 'c3',
              label: '节点3',
              children: [
                {
                  id: 'c3-1',
                  label: '节点3-1',
                  children: [
                    {
                      id: 'c3-1-1',
                      label: '节点3-1-1'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    reset() {
      this.$refs.kunkkaPanelLine.reset()
    },
    getNexus() {
      console.log(this.$refs.kunkkaPanelLine.nexus)
      this.$message.success(`${JSON.stringify(this.$refs.kunkkaPanelLine.nexus)}`)
    }
  }
};
</script>

<style></style>
